<!-- 审批列表-请假 -->
<template>
	<view style="background-color: #F7F7F7;">
		<view style="background-color: #fff;">
			<!-- 筛选条件框start -->
			<view class="search_bar">
				<view class="search_left">
					<image
						src="../../../static/client/shaixuan.png"
						class="search_left_img"
					></image>
				</view>
				<input
					class="search_bar_input"
					v-model="searchInfo"
					placeholder="请输入"
					placeholder-class="search_input_text"
				/>
				<image
					src="../../../static/client/sousuo.png"
					class="sousuo_img"
					@click="handleSearch"
				></image>
			</view>
			<!-- 筛选条件框end -->
			<!-- tabs点击栏 -->
			<view class="tabsBarHeader">
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<view
						@click="handleTabsBarClick('0')"
						style="width:33%"
						class="barHeaderItem"
						:class="projectFinnaceCurrent == '0' ? 'tabsCurrentHeader' : ''"
					>
						待审批
					</view>
					<view
						@click="handleTabsBarClick('1')"
						style="width:33%"
						class="barHeaderItem"
						:class="projectFinnaceCurrent == '1' ? 'tabsCurrentHeader' : ''"
					>
						已通过
					</view>
					<view
						@click="handleTabsBarClick('2')"
						style="width:33%"
						class="barHeaderItem"
						:class="projectFinnaceCurrent == '2' ? 'tabsCurrentHeader' : ''"
					>
						已拒绝
					</view>
					<!-- <view
						@click="handleTabsBarClick('4')"
						style="width:25%"
						class="barHeaderItem"
						:class="projectFinnaceCurrent == '4' ? 'tabsCurrentHeader' : ''"
					>
						已撤销
					</view> -->
				</scroll-view>
			</view>
		</view>

		<!-- tabs展示主体区域 -->
		<view class="tabsContainer">
			<!-- 1.待审批 -->
			<scroll-view scroll-y class="tabsItem tabs1" style="max-height: calc(100vh  - 220rpx);">
				<view class="punchCardList" v-if="tableData1.length>0">
					<view class="waitItem" v-for="item in tableData1" @click="goDetails(item.id)">
						<view class="titleRow">
							<view class="titleLeft">请假申请</view>
							<!-- <view class="titleRight">请假时长:1.0小时</view> -->
						</view>
						<view class="dateRow">
							{{'请假日期:' + item.start_time + ' — ' + item.end_time}}
						</view>
						<view class="nickName">{{'发起人:' + item.nickname}}</view>
						<view class="reasons">
							<view>请假备注:</view>
							<view class="overFlow">{{item.remark}}</view>
						</view>
						<view class="dateAndEdit">
							<view class="leftDate">{{item.add_time}}</view>
							<view class="rightBtn" v-if="item.status=='0'">
								<button class="btn" @click.stop="handleAgree(item.id)">同意</button>
								<button
									style="background-color: #DD524D;"
									@click.stop="handleResolve(item.id)"
									class="btn"
								>
									拒绝
								</button>
							</view>
							<view class="rightBtn" v-else>
								<view style="color: #007AFF;" v-if="item.status=='1'">已通过</view>
								<view style="color: #DD524D;" v-if="item.status=='2'">已拒绝</view>
								<view style="color: #DD524D;" v-if="item.status=='3'">撤销</view>
							</view>
						</view>
					</view>
					<!-- 加载更多 -->
					<view style="width: 100%;">
						<uni-load-more
							:status="status1"
							iconType="auto"
							@clickLoadMore="getMoreFinnace1"
						></uni-load-more>
					</view>
				</view>
				<view v-else style="color:#999;text-align: center;margin-top: 50rpx;">暂无数据</view>
			</scroll-view>
			<!-- </swiper-item> -->
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="outSide" type="dialog" :mask-click="true">
			<view class="popupPunch" style="position: relative; width: 100%;">
				<view class="closeIcon" @click="close">
					<image
						style="width:52rpx;height: 52rpx;"
						src="../../../static/images/Close_icon@2x.png"
					></image>
				</view>
				<scroll-view scroll-y class="punchDetails">
					<view class="container">
						<view class="punchTitle">{{ '请输入拒绝理由' }}</view>
						<!-- <view class="punchTitle" v-if="btnStatusData.type=='7'">{{ '请输入同意理由' }}</view> -->
						<textarea
							v-model="noReasons"
							class="texta"
							placeholder="请输入理由"
							placeholder-style="font-size:26rpx;color:#999"
						/>
						<view class="textareaRemark">0/60字</view>
					</view>
				</scroll-view>
				<!-- 按钮行 -->
				<view class="popupBtnRow">
					<view
						style="background-color: #f38a1b;border-radius: 45rpx 0 0 45rpx;"
						class="btn"
						@click="close"
					>
						取消
					</view>
					<view
						style="background-color: #139cff;border-radius: 0 45rpx 45rpx 0;"
						class="btn"
						@click="handleDisAgreeSubmit"
					>
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			submitDisable: false,
			tiemID: null,
			timeDou: 300,
			proItemShow: false,
			tableData1: [],
			currentPage1: 1,
			pageSize1:10,
			totle1: 0,
			searchInfo: '',
			date_start: '',
			date_end: '',
			financeIndexData: {},
			startDate: '',
			endDate: '',
			select_query: false,
			status1: 'more',
			pageNum: 0,
			token: '',
			member_id: '',
			company_id: '',
			projectFinnaceCurrent: '0',
			projectTypeList: [
				{
					project_type_id: '1',
					project_type_name: '1'
				}
			],
			proItemShow: false,
			swiperCurrent: 0,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			aprovalId: '',
			noReasons: '',
		};
	},
	onShow() {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
		this.aprovalId = '';
		this.status1 = 'more';
		this.tableData1=[]
		this.currentPage1 = 1
		this.getExamineList()
	},
	onLoad(options) {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
	},
	methods: {
		goDetails(id){
			if(id){
				uni.navigateTo({
					url:`/packageAdmin/pages/punchCard/attendanceApply?punchId=${id}`
				})
			}
		},
		// 点击同意
		handleAgree(id){
			this.aprovalId = id
			this.handleAproval('1')
		},
		
		// 请假审批
		async handleAproval(val){
			
			
			this.submitDisable = true;
			clearTimeout(this.tiemID);
			this.tiemID = setTimeout(async () => {
				const { data: res } = await this.$myRequest({
					url: 'ClockInApprove/leave_handle',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						id: this.aprovalId,
						
						status: val,
						reason: this.noReasons,
						
					}
				});
				this.submitDisable = false;
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				this.status1 = 'more';
				this.tableData1=[]
				this.currentPage1 = 1
				this.getExamineList()
			}, this.timeDou);
			
			
			
		},
		handleSearch(){
			this.status1 = 'more';
			this.tableData1=[]
			this.currentPage1 = 1
			this.getExamineList()
		},
		async getExamineList(){
			const {
				data: res
			} = await this.$myRequest({
				url: 'ClockInApprove/leave_handle_list',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
			
					type: this.projectFinnaceCurrent,
					p: this.currentPage1,
					p_count: this.pageSize1,
					nickname: this.searchInfo,
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			// this.tableData1 = res.datas.listInfo;
			this.tableData1 = [...this.tableData1, ...res.datas.listInfo];
			this.totle1 = parseInt(res.datas.count);
			console.log('报销列表', this.tableData1);
			console.log(this.pageNum1);
		},
		handleResolve(id) {
			this.aprovalId = id
			this.$refs.outSide.open();
		},
		// 拒绝弹窗点击确定
		handleDisAgreeSubmit(){
			this.handleAproval('2')
			this.$refs.outSide.close();
		},
		close(){
			this.aprovalId=''
			this.noReasons=''
			this.$refs.outSide.close();
		},
		handleTabsBarClick(val) {
			this.projectFinnaceCurrent = val;
			this.searchInfo = ''
			switch (val) {
				case '0':
					this.swiperCurrent = 0;
					this.status1 = 'more';
					this.tableData1=[]
					this.currentPage1 = 1
					this.getExamineList()
					break;
				case '1':
					this.swiperCurrent = 1;
					this.status1 = 'more';
					this.tableData1=[]
					this.currentPage1 = 1
					this.getExamineList()
					break;
				case '2':
					this.swiperCurrent = 2;
					this.status1 = 'more';
					this.tableData1=[]
					this.currentPage1 = 1
					this.getExamineList()
					break;
			}
			console.log(this.swiperCurrent);
		},
		// 点击加载更多1
		getMoreFinnace1() {
			if (this.totle1 > this.tableData1.length) {
				this.status1 = 'loading';
				this.currentPage1++;
				this.getExamineList(); //执行的方法
				this.status1 = 'more';
			} else {
				//停止加载
				this.status1 = 'noMore';
			}
		}
	}
};
</script>

<style scoped lang="scss">
.head_text {
	width: 100%;
	height: 128rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	line-height: 160rpx;
	text-align: center;
	border-bottom: 2rpx solid #f7f7f7;
}

// 导航栏头部点击部分
.tabsBarHeader {
	display: flex;
	background-color: #fff;

	.barHeaderItem {
		// display: flex;
		display: inline-block;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		box-sizing: border-box;
		text-align: center;
		position: relative;
	}

	.tabsCurrentHeader {
		color: #128bf1;
	}

	.tabsCurrentHeader::before {
		content: '';
		height: 4rpx;
		width: 48%;
		background-color: #40a0f2;
		border-radius: 2rpx;
		position: absolute;
		bottom: 0;
		left: 65rpx;
	}
}

// tabs主体区域
.tabsContainer {
	margin-top: 20rpx;
	.tabsItem {
		background-color: #fff;
		position: relative;

		.punchCardList {
			.waitItem {
				width: 96%;
				margin: 10rpx auto;
				border-radius: 20rpx;
				box-shadow: 0px 0px 9px 0px rgba(3, 70, 126, 0.24);
				.titleRow {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 30rpx;
					.titleLeft {
						font-size: 28rpx;
						color: #333;
						font-weight: 700;
					}
					.titleRight {
						font-size: 24rpx;
						color: #666;
					}
					border-bottom: 1px solid #dfdfdf;
				}
				.dateRow {
					padding: 10rpx 30rpx;
					font-size: 24rpx;
					color: #666;
				}
				.nickName {
					font-size: 26rpx;
					font-weight: 700;
					padding: 0 30rpx;
				}
				.reasons {
					font-size: 24rpx;
					color: #bbb;
					padding: 10rpx 30rpx;
					display: flex;
				}
				.dateAndEdit {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding: 0 30rpx 30rpx;
					font-size: 24rpx;
					color: #bbb;
					.rightBtn {
						display: flex;
						.btn {
							width: 90rpx;
							height: 45rpx;
							border-radius: 10rpx;
							margin-left: 20rpx;
							background-color: #40a0f2;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							padding: 0;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
	// 1.概览
	.tabs1 {
		.overviewRow {
			background-color: #fff;

			.rowTitle {
				height: 102rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #efefef;

				.line {
					width: 6rpx;
					height: 42rpx;
					margin-left: 30rpx;
					margin-right: 23rpx;
					background: #40a0f2;
				}

				.titleText {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.rowBody {
				box-sizing: border-box;
				padding: 0 45rpx;
				padding-top: 26rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.rowBodyItem {
					width: 317rpx;
					height: 147rpx;
					background: url(../../../static/images/projectfinnal_1.png) no-repeat;
					background-size: 100% 100%;

					.num {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						margin-top: 33rpx;
						margin-left: 48rpx;
					}

					.title {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						margin-left: 76rpx;
					}
				}

				.rowBodyItem2 {
					background: url(../../../static/images/projectfinnal_2.png) no-repeat;
					background-size: 100% 100%;
				}

				.rowBodyItem3 {
					margin-top: 13rpx;
					background: url(../../../static/images/projectfinnal_3.png) no-repeat;
					background-size: 100% 100%;
				}

				.rowBodyItem4 {
					background: url(../../../static/images/projectfinnal_4.png) no-repeat;
					background-size: 100% 100%;
				}

				.rowBodyItem5 {
					background: url(../../../static/images/projectfinnal_5.png) no-repeat;
					background-size: 100% 100%;
				}

				.rowBodyItem6 {
					margin-top: 13rpx;
					background: url(../../../static/images/projectfinnal_6.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
}

.add_client {
	width: 137rpx;
	height: 137rpx;
	position: fixed;
	right: 25rpx;
	bottom: 120rpx;
	z-index: 5;
}

.swiper_base {
	height: calc(100vh - 108rpx - 128rpx);
	// height: auto;
	// overflow-y: auto;
}

.search_bar {
	background-color: #fff;
	width: 100%;
	height: 92rpx;
	position: relative;
	// border-bottom: 20rpx solid #f7f7f7;
	margin-bottom: 20rpx;
	.search_bar_input {
		width: 584rpx;
		height: 72rpx;
		background: #f7f7f7;
		border: 1rpx solid #f7f7f7;
		border-radius: 36px;
		margin-left: 136rpx;
		position: absolute;
		top: 10rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		padding-left: 20rpx;

		.search_input_text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #b2b2b2;
			line-height: 37px;
			margin-left: 31rpx;
		}
	}

	.search_left_img {
		width: 46rpx;
		height: 36rpx;
		padding: 28rpx 30rpx;
	}

	.search_left {
		width: 106rpx;
		height: 92rpx;
		background: #40a0f2;
	}

	.sousuo_img {
		width: 38rpx;
		height: 34rpx;
		position: absolute;
		top: 28rpx;
		left: 650rpx;
		z-index: 99;
	}
}

.select_query {
	width: 100%;
	height: auto;
	background: #fff;
	position: absolute;
	top: 95rpx;
	z-index: 99;
	padding-top: 56rpx;
	box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);

	.select_query_text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 30rpx;
	}

	.query_button_confirm {
		width: 375rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #40a0f2 0%, #128bf1 100%);
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		border-radius: 0;
		margin-right: 0;
		margin-top: -80rpx;
	}

	.query_button_cancel {
		width: 385rpx;
		height: 80rpx;
		border-radius: 0px;
		margin-left: 0;
		background: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.picker_input {
		width: 250rpx;
		height: 60rpx;
		background: #ffffff;
		border: 1px solid #dfdfdf;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 60rpx;
		text-align: center;
		margin-left: 170rpx;
		margin-top: -48rpx;
	}

	.select_input {
		width: 530rpx;
		height: 60rpx;
		background: #ffffff;
		border: 1rpx solid #dfdfdf;
		border-radius: 10rpx;
		margin-left: 170rpx;
		line-height: 60rpx;
		padding-left: 22rpx;
		position: relative;
		font-size: 26rpx;

		.select_input_text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
}

.project_item {
	width: 550rpx;
	height: 206rpx;
	background: #ffffff;
	box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	position: absolute;
	top: 110rpx;
	right: 25rpx;
	z-index: 999;

	.item_info {
		width: 100%;
		height: 60rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 60rpx;
	}
}

.rightStatus {
	display: flex;
}

.overFlowName {
	display: block;
	width: 100rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
// 弹窗
.popupPunch {
	background-color: #fff;
	border-radius: 20rpx;
	width: 630rpx;
	.closeIcon {
		position: absolute;
		width: 52rpx;
		height: 52rpx;
		top: -70rpx;
		right: 0;
	}
	.punchDetails {
		width: 630rpx;
		max-height: 750rpx;
		.container {
			padding: 40rpx 50rpx;
			box-sizing: border-box;
		}
		.punchTitle {
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.punchDiaTime {
			text-align: center;
			margin-top: 40rpx;
			font-size: 24rpx;
			color: #666;
		}

		.punchInfo {
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #666;
		}
		/deep/.texta {
			box-sizing: border-box;
			width: 530rpx;
			font-size: 28rpx;
			height: 255rpx;
			background: #f7f7f7;
			// margin:0 auto;
			margin-top: 60rpx;
			padding: 30rpx;
		}
		.textareaRemark {
			text-align: right;
			font-size: 26rpx;
			color: #999;
			margin-top: 10rpx;
			margin: 40rpx;
		}
		// 上传图片
		.upLoadImg {
			display: flex;
			flex-wrap: wrap;
			.upLoadBtn {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				border: 1px solid #999;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.imgItem {
				position: relative;
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 20rpx;
				.imgItemI {
					width: 120rpx;
					height: 120rpx;
				}
				.closeBox {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					background-color: #007aff;
					display: flex;
					justify-content: center;
					align-items: center;
					right: 0;
					top: 0;
				}
			}
		}
	}
	.popupBtnRow {
		width: 630rpx;
		display: flex;
		justify-content: center;
		.btn {
			height: 90rpx;
			width: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			margin: 40rpx 0;
		}
	}
}
.overFlow{
	width: 500rpx;
	overflow: hidden;/*超出部分隐藏*/
	white-space: nowrap;/*不换行*/
	text-overflow:ellipsis;/*超出部分文字以...显示*/
}
</style>
